<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <span></span>
    </div>
    <span></span>
    <script>
        console.log(document);
        console.log(Document); // 可以理解成构造函数，不能使用new操作，系统内部的构造函数
         
        // dom结构树代表的就是一系列的继承关系

        // document --> HTMLDocument.prototype --> Document.prototype

        // HTMLDocument.prototype = {
        //     __proto__: Document.prototype
        // }

        HTMLBodyElement.prototype.abc = 'abc';
        var body = document.getElementsByTagName('body')[0];
        var head = document.getElementsByTagName('head')[0];
        console.log(body.abc, head.abc);


        //document.getElementsByTagName('*')[0];
        // 选择所有的元素

        var div = document.getElementsByTagName('div')[0];
        // 在document里面找
        var span = div.getElementsByTagName('span')[0];
        // 在div里面找


        // document.body ---> body不用重新选
        // document.head ---> head不用重新选
        console.log(document.body);

        console.log(document.documentElement); // --> html元素

    </script>
</body>
</html>